<template>
  <div class="box">
    <el-card class="box-card">
      <el-form :inline="true" :model="formInline" class="demo-form-inline">
        <el-row class="row-bg" justify="space-between">
          <el-col :span="6" class="form-keywords">
            <el-form-item label="关键字">
              <el-input
                v-model="formInline.id"
                placeholder="根据编号搜索"
                clearable
                style="width: 300px"
              />
            </el-form-item>
          </el-col>
          <el-col :span="6"
            ><el-form-item class="form-FunctionButtons">
              <el-button @click="deleteSearch">清除</el-button>
              <el-button type="primary" @click="searchList">搜索</el-button>
            </el-form-item></el-col
          >
        </el-row>
      </el-form>
      <el-alert
        :title="`数据一共 ${total} 条`"
        type="info"
        show-icon
        style="height: 35px"
        :closable="false"
      />
      <el-table :data="tableList" style="width: 100%" class="GqData">
        <el-table-column
          prop="items.id"
          label="编号"
          width="240"
          label-class-name="Gq-item-label"
        />
        <el-table-column
          label="题型"
          width="100"
          label-class-name="Gq-item-label"
        >
          <template #default="scope">
            <div>
              {{
                scope.row?.items.questionType === '1'
                  ? '单选'
                  : scope.row?.items.questionType === '2'
                  ? '多选'
                  : scope.row?.items.questionType === '3'
                  ? '简答'
                  : ''
              }}
            </div>
          </template>
        </el-table-column>
        <el-table-column
          label="题目编号"
          width="195"
          label-class-name="Gq-item-label"
          ><template #default="scope">
            <a
              href="javascript:;"
              @click="TopicPreviewShow(scope.row?.items.questionIDs)"
              style="color: rgb(0, 153, 255)"
              >{{ scope.row?.items.questionIDs }}</a
            >
          </template>
        </el-table-column>
        <el-table-column prop="items.addTime" label="录入时间" width="190" />
        <el-table-column
          prop="items.totalSeconds"
          label="答题时间(s)"
          width="205"
          label-class-name="Gq-item-label"
        />
        <el-table-column
          prop="items.accuracyRate"
          label="正确率(%)"
          width="205"
          label-class-name="Gq-item-label"
        />
        <el-table-column
          prop="items.userName"
          label="正录入人"
          width="200"
          label-class-name="Gq-item-label"
        />
        <el-table-column
          label="操作"
          width="80"
          label-class-name="Gq-item-label"
        >
          <template v-slot:default="{ row }">
            <el-button
              type="danger"
              :icon="Delete"
              circle
              class="GqData-delete"
              @click="removeItem(row.items.id)"
            />
          </template>
        </el-table-column>
      </el-table>
      <div class="clearfix">
        <el-pagination
          background
          layout="prev, pager, next, sizes, jumper"
          :page-sizes="[20, 30, 50, 100]"
          v-model:current-page="page"
          v-model:page-size="pageSize"
          :total="total"
          @size-change="getDefaultTeamList"
          @current-change="getDefaultTeamList"
          style="margin-top: 20px; float: right"
        >
        </el-pagination>
      </div>
    </el-card>
    <TopicPreview
      v-model:dialog="dialog"
      :TeamList="TeamList"
    ></TopicPreview>
  </div>
</template>

<script lang="ts" setup>
import TopicPreview from '@/components/TopicPreview/index.vue'
import { Delete } from '@element-plus/icons-vue'
import { reactive, ref } from 'vue'
import {
  getDefaultTeamListAPI,
  deleteDefaultTeamItemAPI,
  getTopicDetailsItemAPI
} from '@/api/TeamList/index'
// 下拉选择每一页显示多少条数据(默认值)
const pageSize = ref(20)
// 页码
const page = ref(1)
// 总条数
const total = ref(20)
// 表单数据
const formInline = reactive({
  id: '' // 关键字
})
// 关键字
const keyword = ref('')
// 渲染的试题数据内容
// {
//     counts: 996,
//     items: {
//       accuracyRate: 77,
//       addTime: '2020-11-02 13:25:27',
//       id: 'm06102781122614889600',
//       progressOfAnswer: 57,
//       questionIDs: 'o75111626169778613460n60691245333253333300',
//       questionType: '2',
//       totalSeconds: 106,
//       userName: '汪超'
//     },
//     page: 1,
//     pages: 49.8,
//     pagesize: 20
//   }
let tableList = ref<any>([])
// 根据页码获取表单数据
async function getDefaultTeamList() {
  const { data } = await getDefaultTeamListAPI({
    page: page.value,
    pagesize: pageSize.value,
    keyword: keyword.value
  })
  // 将数据和总条数等数据都赋上值
  tableList.value = data.data
  total.value = data.data[0]?.counts || 20
}
// 页面打开就获取默认数据
getDefaultTeamList()
// 点击根据编号搜索
const searchList = async () => {
  // 发起数据的关键词变更为填写的关键字
  keyword.value = formInline.id
  // 页码和条数改为默认的
  page.value = 1
  pageSize.value = 20
  // 根据关键词获取数据
  await getDefaultTeamList()
}
// 点击清除, 清除搜索信息
function deleteSearch() {
  formInline.id = ''
  keyword.value = ''
}
// 点击删除弹出确认删除按钮
function removeItem(id: string) {
  ElMessageBox.confirm('此操作将永久删除该文件, 是否继续?', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  })
    .then(async () => {
      try {
        // 点击确定删除的时候, 根据id删除数据
        await deleteDefaultTeamItemAPI({ id })
        // 提示删除成功
        ElMessage({
          type: 'success',
          message: '删除成功!'
        })
        // 重新获取数据
        await getDefaultTeamList()
      } catch (error) {
        ElMessage({
          type: 'info',
          message: '删除失败'
        })
      }
    })
    .catch(err => err)
}
// 题目详情的数据数据
const TeamList = ref({})
// 题目预览弹出层显示
const dialog = ref(false)
async function TopicPreviewShow(id: string) {
  // 显示题目详情弹框
  dialog.value = true
  // 根据题目编号获取数据
  const res = await getTopicDetailsItemAPI({ id })
  const obj = res.data.data
  TeamList.value = obj
}
</script>

<style>
.clearfix:after {
  /* 内容 */
  content: '';
  /* 转化为块标签 */
  display: block;
  height: 0;
  /* 清除两侧浮动 both两侧  left左浮动  right有浮动 */
  clear: both;
  /* 隐藏元素但占有原来的位置 */
  visibility: hidden;
}

.clearfix {
  /* 让清除浮动效果兼容IE6、7  */
  zoom: 1;
}
.box {
  padding: 15px 10px 50px;
  width: 100%;

  .box-card {
    width: 100%;
    .form-keywords {
      padding-left: 20px;
    }
    .form-FunctionButtons {
      float: right;
      margin-right: 0;
      .el-button {
        width: 55px;
        height: 31px;
        font-size: 12px;
      }
    }
    .demo-form-inline {
      .el-form-item__label {
        font-weight: 800;
      }
    }
    .GqData {
      .GqData-delete {
        color: #f56c6c;
        background: #fef0f0;
        border-color: #fbc4c4;
      }
      .GqData-delete:hover {
        background: #f78989;
        border-color: #f78989;
        color: #fff;
      }
      .Gq-item-label {
        height: 45px;
      }
    }
    .el-input--suffix {
      width: 100px;
    }
    .el-pagination__editor {
      width: 45px;
    }
  }
}
</style>
